<template>
     <div class="search-history">
        <van-cell>
            <template #title>
                <span>搜索历史</span>
            </template>

            <template #value>
            <div v-if="isDeleteShow">
               <span @click="delAllHis">全部删除 </span>
               <span  @click="isDeleteShow=false"> 完成</span>             
            </div>
            <van-icon name="delete" v-else @click="isDeleteShow=true"></van-icon>

            </template>

         </van-cell>

         <van-cell    v-for="(item,index) in  searchHis" :key="item" @click="onItemClick(item,index)">
            <template #title>
                <span>{{ item }}</span>
            </template>
            <template #right-icon>
                <van-icon name="close" v-if="isDeleteShow"></van-icon>
            </template>
        </van-cell>
     
    </div>

</template>

<script>
import { ref, onMounted, reactive,toRefs } from 'vue';

function useItemClick(state,searchHis, emit )
{
    const onItemClick=(item,index)=>{

        if(state.isDeleteShow)
        {
            searchHis.splice(index,1);
        }
        else
        {
 
            emit('reSearch',item);

        }

    }
    const delAllHis=()=>{
        console.log("del all His ",searchHis);

        searchHis.splice(0, searchHis.length);
 
    }
    return {
        onItemClick,delAllHis
    }
}

emits:['reSearch']
export default {
//组件使用项目  
  props: { 
    searchHis:{
        type:Array,
        required:true
     }
 },
//使用组件 
 //components:{ArticleItem },


     setup(props,{emit}) {
        const state=reactive({
            isDeleteShow:false,
        })

        
        return {
            ...toRefs(state),
            ...useItemClick(state,props.searchHis, emit )
        };
     },
 };
</script>
<style>
     .search-history {
     padding-top: 40px;;
    }
</style>